<script>
  import {mapMutations , mapActions, mapState}  from 'vuex'
  export default {
    name: 'MySon1',
    methods: {
      // handleAdd () {
      //   // this.$store.state.count++
      //   // mutations:{} <---> commit() 
      //   this.$store.commit('addCount')
      // }

      // 同上
      ...mapMutations(['addCount']),

      // setAsyncCount(){
        // 调用 actions
        // mapActions{}  优化先试试
        // this.$store.dispatch('setAsyncCount' , 777)
      // }

      // 同上
      ...mapActions(['setAsyncCount']),

      // updateUser2 () {
      //  // 调用action dispatch
      //   this.$store.dispatch('user/setUserSecond', {
      //     name: 'dark',
      //     age: 17
      //   })
      // },

      // 同上
      ...mapActions('user', ['setUserSecond'])



    },
    computed:{
      ...mapState('user',['userInfo'])
    }
  }
</script>

<template>
  <div class="box">
    <h2>我是Son1  逐渐</h2>
    这是Vuex传来得值 : <label></label>

    <br>

    <button @click="addCount" >值 + 1</button>

    <br>

    <button @click="setAsyncCount(777)"> 2s后 异步修改 count</button>

    <br>
    {{ userInfo.name }}  --- 
    {{ userInfo.age }}
    <br>

    <button @click="setUserSecond({ name: 'dark', age: 80 })">一秒后更新信息</button>
  </div>
</template>

<style scoped lang="scss">

</style>
